<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions">

<h:head>
	<h:outputStylesheet library="css" name="default.css" />
	<h:outputStylesheet library="css" name="imagens.css" />
</h:head>

<ui:composition template="#{procedimentoFaces.nomeTemplate}">

	<ui:define name="content">
		<h:form id="formProcedimento">
			<p:growl id="mensagens" life="#{msg.time_stick}" />

			<p:panel id="painel" >
				<f:facet name="header">
					<div align="left"><h:outputText value="Procedimento" styleClass="tituloPainelInterno"/></div>
				</f:facet>
			
				<p:spacer height="2px" />
				
				<p:panel id="painelBusca" header="Pesquisar">
					<f:facet name="header">
						<div align="left"><h:outputText value="Pesquisar" styleClass="tituloPainelInterno"/></div>
					</f:facet>

					<h:outputText value="Procedimento " />
					<p:inputText value="#{procedimentoFaces.procedimentoBusca}" />
					
					<p:commandButton value="Buscar" id="buscarProcedimento"
							actionListener="#{procedimentoFaces.buscarProcedimento()}" update=":formProcedimento:tabelaProcedimento"
							icon="imgPesquisaBasica" style="float:right"
							/>
					<p:tooltip value="Buscar procedimentos" for="buscarProcedimento" styleClass="textoToolTip"/>
				</p:panel>
				
				<p:spacer height="2px" />
				
				<p:dataTable value="#{procedimentoFaces.listaProcedimento}" var="item" id="tabelaProcedimento" 
					emptyMessage=" " styleClass="tabelaCompleta"
					rowStyleClass="#{empty rowIx or rowIx mod 2 ne 0 ? 'even-row' : 'odd-row'}" rowIndexVar="rowIx"
					>
					
					<f:facet name="header">
						<div align="left"><h:outputText value="Procedimentos" styleClass="tituloPainelInternoComBotao"/></div>
						<div align="right">
            				<p:commandButton value="Novo" id="novoProcedimento"
            					actionListener="#{procedimentoFaces.prepararAdicionar()}"  
								icon="imgAdicionar" update=":formProcedimento:dialogProcedimento"
							/>
							<p:tooltip value="Adicionar procedimento" for="novoProcedimento" styleClass="textoToolTip"/>
						</div>
					</f:facet>
					
					<p:column headerText="Procedimento">
						<h:outputText value="#{item.nome}" />
					</p:column>

					<p:column headerText="Valor total Peq.">
						<h:outputText value="#{item.valorTotalPequeno}" >
							<f:convertNumber currencySymbol="R$" type="currency" />
						</h:outputText>
					</p:column>

					<p:column headerText="Porcentagem Peq.">
						<h:outputText value="#{item.porcentagemComissaoPequeno}" >
 							<f:convertNumber minFractionDigits="2"/>  
						</h:outputText>
						<h:outputText value=" %" />
					</p:column>

					<p:column headerText="Valor líquido Peq.">
						<h:outputText value="#{item.valorLiquidoPequeno}">
							<f:convertNumber currencySymbol="R$" type="currency" />
						</h:outputText>
					</p:column>

					<p:column headerText="Valor total Gde.">
						<h:outputText value="#{item.valorTotalGrande}" >
							<f:convertNumber currencySymbol="R$" type="currency" />
						</h:outputText>
					</p:column>

					<p:column headerText="Porcentagem Gde.">
						<h:outputText value="#{item.porcentagemComissaoGrande}" >
 							<f:convertNumber minFractionDigits="2"/>  
						</h:outputText>
						<h:outputText value=" %" />
					</p:column>

					<p:column headerText="Valor líquido Gde.">
						<h:outputText value="#{item.valorLiquidoGrande}">
							<f:convertNumber currencySymbol="R$" type="currency" />
						</h:outputText>
					</p:column>

					<p:column headerText="Opções" width="10%">
							<p:commandLink styleClass="ui-icon ui-icon-pencil" 
									actionListener="#{procedimentoFaces.selecionarRegistro(item.id, true)}"
									update=":formProcedimento:dialogProcedimento"
									title="Editar" style="float:left;"
									/>
	
							<p:commandLink styleClass="ui-icon ui-icon-close" 
									actionListener="#{procedimentoFaces.selecionarRegistro(item.id, false)}"
									update=":formProcedimento:dialogExcluir"
									title="Excluir" style="float:left;"
									/>
							<p:commandLink styleClass="ui-icon ui-icon-arrowstop-1-s" 
								actionListener="#{procedimentoFaces.retornoProcedimento(item)}" rendered="#{procedimentoFaces.isPopup}" />
							
					</p:column>
					
					
				</p:dataTable>
			</p:panel>

			<p:dialog header="Campos Procedimento" widgetVar="dialogProcedimento" id="dialogProcedimento" 
					modal="true" resizable="false" closeOnEscape="true">
					
					
					<h:panelGroup id="painelDialog">
					<table width="100%">
						<tr>
							<td width="20%">
								<h:outputText value="Categoria" />	
							</td>
							<td>
								<p:selectOneMenu value="#{procedimentoFaces.procedimento.categoriaProcedimento}" style="width:100%">
									<f:selectItem itemLabel="Selecione..." itemValue=""/>
									<f:selectItems value="#{procedimentoFaces.listaCategoriaProcedimento}" var="catProced" 
										itemValue="#{catProced}" itemLabel="#{catProced.categoria}"/>
									<p:ajax event="change" listener="#{procedimentoFaces.buscarSubCategoria()}" update="painelDialog"/>
								</p:selectOneMenu>
							</td>
						</tr>
						<tr>
							<td width="20%">
								<h:outputText value="Sub Categoria" id="labelSub"
									rendered="#{procedimentoFaces.exibirSubCategoria}" />	
							</td>
							<td>
								<p:selectOneMenu value="#{procedimentoFaces.procedimento.subCategoria}" style="width:100%" 
									rendered="#{procedimentoFaces.exibirSubCategoria}" id="campoSub" converter="converterGeral" >
									<f:selectItem itemLabel="Selecione..." itemValue=""/>
									<f:selectItems value="#{procedimentoFaces.listaSubCategoria}" var="subCat" 
										itemValue="#{subCat}" itemLabel="#{subCat.nomeSubCategoria}"/>
								</p:selectOneMenu>
							</td>
						</tr>
						<tr>
							<td>
								<h:outputText value="Procedimento" />
							</td>
							<td>
								<p:inputText value="#{procedimentoFaces.procedimento.nome}" style="width:98%"/>
							</td>
						</tr>
					</table>
					</h:panelGroup>
					<h:panelGrid columns="2">
						<p:panel header="Preço porte pequeno">
							<h:panelGrid columns="2">
								<h:outputText value="Valor total" />
								<pe:inputNumber value="#{procedimentoFaces.procedimento.valorTotalPequeno}" 
									symbol="R$ " thousandSeparator="." decimalSeparator="," id="valorTotal" >
									<p:ajax event="blur" listener="#{procedimentoFaces.calculaValorPequeno()}" update="percent liquido"/>
								</pe:inputNumber>
								
								<h:outputText value="Comissão" />
								<pe:inputNumber value="#{procedimentoFaces.procedimento.porcentagemComissaoPequeno}"
									symbol=" %" symbolPosition="right" thousandSeparator="." decimalSeparator="," id="percent">
									<p:ajax event="blur" listener="#{procedimentoFaces.calculaValorPequeno()}" update="liquido"/>
								</pe:inputNumber>
		
								<h:outputText value="Valor líquido" />
								<pe:inputNumber value="#{procedimentoFaces.procedimento.valorLiquidoPequeno}"
									symbol="R$ " thousandSeparator="." decimalSeparator="," id="liquido">
									<p:ajax event="blur" listener="#{procedimentoFaces.calcularPorcentagemPequeno()}" update="percent"/>
								</pe:inputNumber>
							</h:panelGrid>
						</p:panel>

						<p:panel header="Preço porte grande">
							<h:panelGrid columns="2"> 
								<h:outputText value="Valor total" />
								<pe:inputNumber value="#{procedimentoFaces.procedimento.valorTotalGrande}" 
									symbol="R$ " thousandSeparator="." decimalSeparator="," id="valorTotalGrande" >
									<p:ajax event="blur" listener="#{procedimentoFaces.calculaValorGrande()}" update="percentGrande liquidoGrande"/>
								</pe:inputNumber>
								
								<h:outputText value="Comissão" />
								<pe:inputNumber value="#{procedimentoFaces.procedimento.porcentagemComissaoGrande}"
									symbol=" %" symbolPosition="right" thousandSeparator="." decimalSeparator="," id="percentGrande">
									<p:ajax event="blur" listener="#{procedimentoFaces.calculaValorGrande()}" update="liquidoGrande"/>
								</pe:inputNumber>
		
								<h:outputText value="Valor líquido" />
								<pe:inputNumber value="#{procedimentoFaces.procedimento.valorLiquidoGrande}"
									symbol="R$ " thousandSeparator="." decimalSeparator="," id="liquidoGrande">
									<p:ajax event="blur" listener="#{procedimentoFaces.calcularPorcentagemGrande()}" update="percentGrande"/>
								</pe:inputNumber>
							</h:panelGrid>
						</p:panel>
					</h:panelGrid>
						
					<div align="center" >					
						<p:commandButton value="Adicionar" actionListener="#{procedimentoFaces.adicionar()}" 
										title="Adicionar Procedimento" icon="imgAdicionar"
										update="mensagens :formProcedimento:tabelaProcedimento"
										rendered="#{procedimentoFaces.procedimento.id == null}"
						/>
						
						<p:commandButton value="Salvar" actionListener="#{procedimentoFaces.editar()}" 
										title="Editar Procedimento" icon="imgSalvar"
										update="mensagens :formProcedimento:tabelaProcedimento" 
										rendered="#{procedimentoFaces.procedimento.id != null}"
						/>
					</div>
			</p:dialog>
			
			<p:dialog header="Confirmar Exclusão"  
					widgetVar="dialogExcluir" id="dialogExcluir" 
					modal="true" resizable="false" closeOnEscape="true">
				<h:outputText value="Confirma a exclusão da Procedimento " /> 
				<br />
				<h:outputText value="#{procedimentoFaces.procedimento.nome} ?" />
				<br />
				<p:commandButton value="Excluir" actionListener="#{procedimentoFaces.remover()}" 
				update="mensagens :formProcedimento:tabelaProcedimento" />
			</p:dialog>

		</h:form>
	</ui:define>
</ui:composition>
</html>